<template>
    <view class="index-content">
        <Navbar :hideBtn="true" title="首页" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar>
        <view class="index-block">
            <view class="index-block-title">运行统计</view>
            <u-row gutter="16">
                <u-col span="4">
                    <view class="item-tj item-tj-frist">
                        <view style="padding: 16rpx; height: 100%; position: relative;">
                            <view style="display: flex; color: white;">
                                <u-icon name="account" color="#fff"></u-icon>
                                <text>在线人数</text>
                            </view>
                            <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                                <u-count-to :startVal="0" :endVal="149" :duration="1500" color="#fff"
                                            separator=","></u-count-to>
                            </view>
                        </view>
                    </view>
                </u-col>
                <u-col span="4">
                    <view class="item-tj item-tj-second">
                        <view style="padding: 16rpx; height: 100%; position: relative;">
                            <view style="display: flex; color: white;">
                                <u-icon name="photo" color="#fff"></u-icon>
                                <text>今日新增</text>
                            </view>
                            <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                                <u-count-to :startVal="1" :endVal="2349" :duration="1500" color="#fff"
                                            separator=","></u-count-to>
                            </view>
                        </view>
                    </view>
                </u-col>
                <u-col span="4">
                    <view class="item-tj item-tj-thrid">
                        <view style="padding: 16rpx; height: 100%; position: relative;">
                            <view style="display: flex; color: white;">
                                <u-icon name="photo" color="#fff"></u-icon>
                                <text>总人数</text>
                            </view>
                            <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                                <u-count-to :startVal="1" :endVal="1249350" :duration="1500" color="#fff"
                                            separator=","></u-count-to>
                            </view>
                        </view>
                    </view>
                </u-col>
            </u-row>
        </view>
        <view class="index-block">
            <view class="index-block-title">近7天访问量统计</view>
            <view>
                <qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload"
                                  :opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}"
                                  :chartData="historyData"/>
            </view>
            <view class="index-block-title">访问量统计</view>
            <view>
                <qiun-data-charts type="bar" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload"
                                  :opts="{xAxis:{disabled: true,disableGrid:true},extra:{bar:{barBorderCircle:true,width:20}},legend:{show:false}}"
                                  :chartData="historyData"/>
            </view>
        </view>
        <view class="index-block">
            <view class="index-block-title">数据总览</view>
            <view class="detail_list">
                <view v-for="(item,index) in detail_list" :key="index" class="detail_item">
                    <view>
                        <view class="font-middle">{{ item.date }}</view>
                        <view class="font-small">{{ item.time }}</view>
                    </view>
                    <view class="icon">
                        <li :class="['iconfont',item.type == 'income'?'icon-income':'icon-expend']"></li>
                    </view>
                    <view class="right_content">
                        <view class="money">{{ item.type == 'income' ? '+' : '-' }}{{ item.money }}</view>
                        <view class="text-gray font-middle">{{ item.desc }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import Navbar from '@/components/navbar/Navbar'

    let _now = new Date();
    let now_time = {};
    now_time.year = _now.getFullYear()
    now_time.month = _now.getMonth() + 1
    now_time.day = _now.getDay()

    export default {
        components: {
            Navbar,
        },
        data() {
            return {
                user: {},
                isCanvas2d: true,
                delayload: false,
                historyData: {
                    "categories": [
                        "1月",
                        "2月",
                        "2月",
                        "4月",
                        "5月"
                    ],
                    "series": [
                        {
                            "name": "收入情况",
                            "data": [1601, 1840.5, 1900, 1760, 1500.85],
                            "type": "line",
                            "style": "curve",
                            "color": "#4ECDB6",
                            "unit": ""
                        }
                    ],
                    "yAxis": [
                        {
                            "calibration": true,
                            "position": "left",
                            "title": "单位/元",
                            "titleFontSize": 12,
                            "unit": "",
                            "tofix": 0,
                            "min": 0,
                            "disableGrid": true
                        }
                    ]
                },
                detail_list: [
                    {date: now_time.month + "-01", time: "11:01", "type": "extend", money: "10.00", desc: "银行卡转出"},
                    {date: now_time.month + "-01", time: "13:45", "type": "income", money: "18.00", desc: "银行卡收入"},
                    {date: now_time.month + "-02", time: "06:21", "type": "extend", money: "123.45", desc: "信用卡转出"},
                    {date: now_time.month + "-03", time: "07:38", "type": "income", money: "23.00", desc: "银行卡收入"},
                    {date: now_time.month + "-08", time: "16:28", "type": "extend", money: "23.56", desc: "信用卡转出"},
                    {date: now_time.month + "-09", time: "15:25", "type": "income", money: "850.12", desc: "银行卡收入"},
                    {date: now_time.month + "-09", time: "18:52", "type": "income", money: "1.88", desc: "银行卡收入"},
                    {date: now_time.month + "-11", time: "21:12", "type": "extend", money: "220.21", desc: "银行卡转出"},
                    {date: now_time.month + "-12", time: "13:08", "type": "income", money: "32.28", desc: "银行卡收入"},
                    {date: now_time.month + "-12", time: "12:41", "type": "extend", money: "122.12", desc: "信用卡转出"},
                    {date: now_time.month + "-13", time: "17:21", "type": "income", money: "10.00", desc: "银行卡收入"},
                ]
            };
        },
        created() {
            this.getInfo()
        },
        methods: {
            getInfo() {
                this.$store.dispatch('Info').then(res => {
                    this.user = res.user
                })
            }
        }
    }
</script>

<style lang="scss">
  .index-content {
    background-color: #f3f4f6;
    min-height: 100vh;
  }

  .index-block {
    padding: 40rpx;
    background-color: #fff;
  }

  .index-block-title {
    font-size: 40rpx;
    font-weight: bold;
    padding: 0 0 40rpx 0;
  }

  .item-tj {
    width: 100%;
    height: 160rpx;
    border-radius: 16rpx;

    &-frist {
      background-color: rgba($color: #2979ff, $alpha: 0.8);
      // background-image: url('/static/img/bg/qb.png');
    }

    &-second {
      background-color: rgba($color: #303133, $alpha: 0.8);
      // background-image: url('/static/img/bg/qb.png');
    }

    &-thrid {
      background-color: rgba($color: #19be6b, $alpha: 0.8);
      // background-image: url('/static/img/bg/qb.png');
    }
  }

  .detail_list {
    height: 700rpx;
    overflow: auto;
    color: #9E9E9E;

    .detail_item {
      display: flex;
      margin: 20rpx 0;
      align-items: center;

      .icon {
        width: 30%;
        text-align: center;

        li {
          font-size: 80rpx;
        }
      }

      .right_content {
        width: 50%;
        text-align: center;
      }

      .icon-income {
        color: #4AABF9;
      }

      .icon-expend {
        color: #E45521;
      }

      .money {
        color: #000;
      }
    }
  }
</style>